<template>
  <el-dialog v-model="dialogVisible" title="商品搜索" width="72%" :style="{ height: '85%' }" :modal="true" :append-to-body="true">
    <div style="display: flex; flex-direction: column; height: 100%;">
      <ContentWrap>
        <!-- 搜索工作栏 -->
        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item label="商品" prop="documentNumber">
            <el-input
              v-model="queryParams.documentNumber"
              placeholder="请输入商品名称或条码"
              clearable
              @keyup.enter="handleQuery"
              class="!w-240px"
            />
          </el-form-item>

          <el-form-item label="类型" prop="type">
            <el-select v-model="queryParams.type" placeholder="请选择类型" clearable class="!w-240px">
              <el-option
                v-for="dict in getIntDictOptions(DICT_TYPE.ERP_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="仓库" prop="auditStatus">
            <el-select v-model="ckValue" placeholder="请选择仓库" clearable class="!w-240px" @focus="getCk">
              <el-option
                v-for="itemT in ckList"
                :key="itemT.id"
                :label="itemT.name"
                :value="itemT.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="handleQuery">
              <Icon icon="ep:search" class="mr-5px"/>搜索
            </el-button>
            <el-button @click="resetQuery">
              <Icon icon="ep:refresh" class="mr-5px"/>重置
            </el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>

      <!-- 商品列表 -->
      <el-table :data="listProduct" @selection-change="handleSelectionChange">
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column label="条码" align="center" prop="barCode" />
        <el-table-column label="货物名称" align="center" prop="gname" />
        <el-table-column label="商品类型" align="center" prop="productType" />
        <el-table-column label="类别" align="center" prop="category" />
        <el-table-column label="型号" align="center" prop="model" />
        <el-table-column label="品牌" align="center" prop="brand" />
        <el-table-column label="单位" align="center" prop="unit" />
        <el-table-column label="规格" align="center" prop="specif" />
        <el-table-column label="状态(启用)" align="center" prop="stats" />
        <el-table-column label="用途" align="center" prop="type" />
        <el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" width="180px" />
      </el-table>

      <Pagination :total="total" v-model:page="queryParamsGoods.pageNo" v-model:limit="queryParamsGoods.pageSize" @pagination="getList" />

      <!-- 确认和取消按钮 -->
      <div style="display: flex; justify-content: flex-end; padding: 10px;">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="selectGoodsConfirm">确定</el-button>
      </div>
    </div>
  </el-dialog>

  <!-- 显示已选择商品 -->
  <div id="assigned-products">
    <h2>已选择的商品:</h2>
    <p>{{ selectedGoods.join(', ') }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const dialogVisible = ref(false);
    const queryParams = ref({ documentNumber: '', type: '', auditStatus: '' });
    const ckValue = ref(null);
    const ckList = ref([]); // 仓库列表
    const listProduct = ref([]); // 商品列表
    const total = ref(0); // 商品总数
    const selectedRows = ref([]); // 存储选中的商品
    const selectedGoods = ref([]); // 选中的商品名称

    const handleQuery = () => {
      // 执行查询逻辑，这里可以调用 API 获取数据
    };

    const resetQuery = () => {
      // 重置查询参数
      queryParams.value = { documentNumber: '', type: '', auditStatus: '' };
      ckValue.value = null;
      // 重新获取数据
      handleQuery();
    };

    const handleSelectionChange = (val) => {
      selectedRows.value = val; // 收集选择的商品
    };

    const selectGoodsConfirm = () => {
      // 将选中的商品名称提取到 selectedGoods 数组中
      selectedGoods.value = selectedRows.value.map(item => item.gname); // 假设 gname 是货物名称
      dialogVisible.value = false; // 关闭对话框
    };

    return {
      dialogVisible,
      queryParams,
      ckValue,
      ckList,
      listProduct,
      total,
      selectedRows,
      selectedGoods,
      handleQuery,
      resetQuery,
      handleSelectionChange,
      selectGoodsConfirm
    };
  }
};
</script>

<style scoped>
#assigned-products {
  margin-top: 20px;
}
</style>
